<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0,user-scalable=no"> 
	<link rel="stylesheet" href="" />
	<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	html,body{
		height: 100%;
	}
	main{
		width: 100%;
		height: 100%;
		position: relative;
	}
	#pic img{
		width: 30%;
		height: 20%;
		border-radius: 50%;
		position: absolute;
		top: 2%;
		left:0;
		right: 0;
		margin: auto;		
	}
	form:nth-of-type(1){
		width: 75%;
		position: absolute;
		top: 30%;
		left:0;
		right: 0;
		margin: auto;
		border-bottom: 1px solid gray;
		padding-bottom: 3%;
	
	}
	form:nth-of-type(2){
		width: 75%;
		position: absolute;
		top: 35%;
		left:0;
		right: 0;
		margin: auto;
		border-bottom: 1px solid gray;
		margin-top: 5%;
		padding-bottom: 3%;
		
	}
	.form input{
		color: gray;
		font-size: 13px;
		border: none;
	}
	 #button{
	 	width: 75%;
		position: absolute;
		top: 48%;
		height: 8%;
		
	}
	#button input{
		width: 100%;
		background-color: green;
		color: white;
		height: 100%;
		border-radius: 5px;
		border: none;
		
	}
	#first{
		position: absolute;
		top: 60%;
		color: grey;
		font-size: 14px;
	}
	#second{
		position: absolute;
		top: 82%;
		color: grey;
		font-size: 14px;
	}
	.juzhong{
		width: 75%;
		text-align: center;
		left:0;
		right: 0;
		margin: auto;
	}
	label{
		font-size: 14px;
	}
	@media  screen and (orientation: landscape){
		main #first{
		
			position: absolute;
			left: 0%;
			text-align: left;
			top: 85%;
			

		}
		main #second{
			position: absolute;
			text-align: right;
			right: 0%;
			top: 85%;
		
		}
		#pic img{
		width: 20%;
		height: 30%;
	}
	#button{
		position: absolute;
		top: 70%;
		height: 11%;
		
	}
	form:nth-of-type(1){
		top: 36%;
	}
	form:nth-of-type(2){
		top: 42%;
	}	
	}
	</style>
</head>
<body>
	<main>
		<div id="pic">
			<img src="QQ图片.jpg" alt="" />
		</div>
		<form class="form" action="">
			<label for="one">账号：</label>
			<input type="" name="" id="one" placeholder="请输入账号" />
		</form>
		<form class="form" action="">
			<label for="two">密码：</label>
			<input type="password" name="" id="two" placeholder="请输入密码" />
		</form>
		<div class="juzhong" id="button"><input type="button" value="登&#x3000;录"/></div>
		<div class="juzhong" id="first">
			<p>忘记密码</p>
		</div>
		<div class="juzhong" id="second">
			<p>注册新用户</p>
		</div>
	</main>
</body>
</html>